De Shape Detection API: een foto zegt meer dan duizend woorden, gezichten en streepjescodes

De Shape Detection API detecteert gezichten, barcodes en tekst in afbeeldingen.

Thomas Steiner

Wat is de Shape Detection API?

Met API's zoals navigator.mediaDevices.getUserMedia en de fotokiezer van Chrome voor Android is het vrij eenvoudig geworden om afbeeldingen of live videogegevens van apparaatcamera's vast te leggen, of om lokale afbeeldingen te uploaden. Tot nu toe waren deze dynamische afbeeldingsgegevens – evenals statische afbeeldingen op een pagina – niet toegankelijk via code, hoewel afbeeldingen wel veel interessante kenmerken kunnen bevatten, zoals gezichten, barcodes en tekst.

Als ontwikkelaars in het verleden bijvoorbeeld dergelijke functies op de client wilden extraheren om een ​​QR-codelezer te bouwen, moesten ze vertrouwen op externe JavaScript-bibliotheken. Dit kon duur zijn vanuit prestatieoogpunt en de totale paginagrootte verhogen. Aan de andere kant beschikken besturingssystemen zoals Android, iOS en macOS, maar ook hardwarechips in cameramodules, doorgaans al over krachtige en sterk geoptimaliseerde featuredetectoren, zoals de Android FaceDetector of de generieke featuredetector voor iOS, CIDetector .

De Shape Detection API maakt deze implementaties beschikbaar via een reeks JavaScript-interfaces. Momenteel zijn de ondersteunde functies gezichtsdetectie via de FaceDetector interface, barcodedetectie via de BarcodeDetector interface en tekstdetectie (Optical Character Recognition (OCR)) via de TextDetector interface.

Voorgestelde gebruiksscenario's

Zoals hierboven aangegeven, ondersteunt de Shape Detection API momenteel de detectie van gezichten, barcodes en tekst. De volgende lijst bevat voorbeelden van use cases voor alle drie de functies.

Gezichtsdetectie

  • Online sociale netwerken of fotodeelsites laten hun gebruikers vaak mensen in afbeeldingen annoteren. Door de grenzen van gedetecteerde gezichten te markeren, kan deze taak worden vereenvoudigd.
  • Inhoudssites kunnen dynamisch afbeeldingen bijsnijden op basis van mogelijk gedetecteerde gezichten in plaats van te vertrouwen op andere heuristieken. Ook kunnen ze gedetecteerde gezichten markeren met Ken Burns -achtige pan- en zoomeffecten in verhaalachtige formaten.
  • Sites voor multimediaberichten kunnen hun gebruikers toestaan ​​om grappige voorwerpen, zoals een zonnebril of een snor, over gedetecteerde gezichtskenmerken te leggen.

Barcodedetectie

  • Webapplicaties die QR-codes kunnen lezen, kunnen interessante toepassingen hebben, zoals online betalingen of webnavigatie. Ook kunnen ze barcodes gebruiken om sociale verbindingen tot stand te brengen in berichtenapplicaties.
  • Winkel-apps kunnen hun gebruikers in staat stellen om EAN- of UPC- barcodes van artikelen in een fysieke winkel te scannen om online prijzen te vergelijken.
  • Luchthavens kunnen webkiosken opzetten waar passagiers de Aztec-codes van hun instapkaart kunnen scannen en gepersonaliseerde informatie over hun vlucht kunnen bekijken.

Tekstdetectie

  • Online sociale netwerksites kunnen de toegankelijkheid van door gebruikers gegenereerde afbeeldingen verbeteren door gedetecteerde teksten als alt attributen voor <img> -tags toe te voegen wanneer er geen andere beschrijvingen zijn opgegeven.
  • Contentsites kunnen tekstdetectie gebruiken om te voorkomen dat koppen over hoofdafbeeldingen met tekst worden geplaatst.
  • Webapplicaties kunnen tekstdetectie gebruiken om teksten, zoals bijvoorbeeld restaurantmenu's, te vertalen.

Huidige status

Stap Status
1. Maak een uitleg Compleet
2. Maak een eerste ontwerp van de specificatie Compleet
3. Verzamel feedback en herhaal het ontwerp In uitvoering
4. Oorsprongsproef Compleet
5. Lancering Barcodedetectie voltooid
Gezichtsdetectie bezig
Tekstdetectie bezig

Hoe de vormdetectie-API te gebruiken

Als u lokaal wilt experimenteren met de Shape Detection API, schakelt u de vlag #enable-experimental-web-platform-features in about://flags .

De interfaces van alle drie de detectoren, FaceDetector , BarcodeDetector en TextDetector , zijn vergelijkbaar. Ze bieden allemaal één asynchrone methode genaamd detect() die een ImageBitmapSource als invoer gebruikt (dat wil zeggen een CanvasImageSource , een Blob of ImageData ).

Voor FaceDetector en BarcodeDetector kunnen optionele parameters worden doorgegeven aan de constructor van de detector, zodat er hints kunnen worden gegeven aan de onderliggende detectoren.

Bekijk de ondersteuningsmatrix in de uitleg aandachtig voor een overzicht van de verschillende platforms.

Werken met de BarcodeDetector

De BarcodeDetector retourneert de ruwe waarden van de barcode die het vindt in de ImageBitmapSource en de omkaderende kaders, evenals andere informatie, zoals de indelingen van de gedetecteerde barcodes.

const barcodeDetector = new BarcodeDetector({
  // (Optional) A series of barcode formats to search for.
  // Not all formats may be supported on all platforms
  formats: [
    'aztec',
    'code_128',
    'code_39',
    'code_93',
    'codabar',
    'data_matrix',
    'ean_13',
    'ean_8',
    'itf',
    'pdf417',
    'qr_code',
    'upc_a',
    'upc_e'
  ]
});
try {
  const barcodes = await barcodeDetector.detect(image);
  barcodes.forEach(barcode => searchProductDatabase(barcode));
} catch (e) {
  console.error('Barcode detection failed:', e);
}

Werken met de FaceDetector

De FaceDetector retourneert altijd de begrenzende kaders van gezichten die hij detecteert in de ImageBitmapSource . Afhankelijk van het platform is er mogelijk meer informatie beschikbaar over gezichtsherkenningspunten zoals ogen, neus of mond. Het is belangrijk om te weten dat deze API alleen gezichten detecteert. Hij identificeert niet bij welk gezicht het hoort.

const faceDetector = new FaceDetector({
  // (Optional) Hint to try and limit the amount of detected faces
  // on the scene to this maximum number.
  maxDetectedFaces: 5,
  // (Optional) Hint to try and prioritize speed over accuracy
  // by, e.g., operating on a reduced scale or looking for large features.
  fastMode: false
});
try {
  const faces = await faceDetector.detect(image);
  faces.forEach(face => drawMustache(face));
} catch (e) {
  console.error('Face detection failed:', e);
}

Werken met de TextDetector

De TextDetector retourneert altijd de omsluitende kaders van de gedetecteerde teksten en op sommige platforms ook de herkende tekens.

const textDetector = new TextDetector();
try {
  const texts = await textDetector.detect(image);
  texts.forEach(text => textToSpeech(text));
} catch (e) {
  console.error('Text detection failed:', e);
}

Functiedetectie

Alleen controleren op het bestaan ​​van de constructors om de Shape Detection API te detecteren, is niet voldoende. De aanwezigheid van een interface vertelt je niet of het onderliggende platform de feature ondersteunt. Dit werkt zoals bedoeld . Daarom raden we een defensieve programmeeraanpak aan door featuredetectie als volgt uit te voeren:

const supported = await (async () => 'FaceDetector' in window &&
    await new FaceDetector().detect(document.createElement('canvas'))
    .then(_ => true)
    .catch(e => e.name === 'NotSupportedError' ? false : true))();

De interface BarcodeDetector is bijgewerkt met een getSupportedFormats() methode en er zijn vergelijkbare interfaces voorgesteld voor FaceDetector en voor TextDetector .

await BarcodeDetector.getSupportedFormats();
/* On a macOS computer logs
  [
    "aztec",
    "code_128",
    "code_39",
    "code_93",
    "data_matrix",
    "ean_13",
    "ean_8",
    "itf",
    "pdf417",
    "qr_code",
    "upc_e"
  ]
*/

Hiermee kunt u de specifieke functie detecteren die u nodig hebt, bijvoorbeeld het scannen van QR-codes:

if (('BarcodeDetector' in window) &&
    ((await BarcodeDetector.getSupportedFormats()).includes('qr_code'))) {
  console.log('QR code scanning is supported.');
}

Dit is beter dan het verbergen van de interfaces, omdat de mogelijkheden zelfs tussen platforms kunnen verschillen. Ontwikkelaars zouden daarom moeten worden aangemoedigd om precies te controleren welke mogelijkheden ze nodig hebben (zoals een specifieke streepjescode-indeling of gezichtsherkenningspunt).

Ondersteuning voor besturingssystemen

Barcodedetectie is beschikbaar op macOS, ChromeOS en Android. Op Android zijn Google Play Services vereist.

Beste praktijken

Alle detectoren werken asynchroon, dat wil zeggen dat ze de hoofdthread niet blokkeren. Vertrouw dus niet op realtime detectie, maar geef de detector wat tijd om zijn werk te doen.

Als je een fan bent van webworkers , zul je blij zijn te horen dat de detectoren daar ook zichtbaar zijn. Detectieresultaten zijn serialiseerbaar en kunnen dus via postMessage() van de worker naar de hoofdapp worden gestuurd. De demo laat dit in de praktijk zien.

Niet alle platformimplementaties ondersteunen alle functies, dus controleer de ondersteuningssituatie zorgvuldig en gebruik de API als een geleidelijke verbetering. Sommige platforms ondersteunen bijvoorbeeld gezichtsherkenning op zich, maar geen herkenningspunten (ogen, neus, mond, enz.); of het bestaan ​​en de locatie van tekst worden herkend, maar niet de inhoud ervan.

Feedback

Het Chrome-team en de webstandaardencommunity willen graag uw ervaringen met de Shape Detection API horen.

Vertel ons over het API-ontwerp

Werkt er iets aan de API dat niet werkt zoals u had verwacht? Of ontbreken er methoden of eigenschappen die u nodig hebt om uw idee te implementeren? Heeft u een vraag of opmerking over het beveiligingsmodel?

Probleem met de implementatie?

Heb je een bug gevonden in de implementatie van Chrome? Of wijkt de implementatie af van de specificatie?

  • Meld een bug op https://new.crbug.com . Zorg ervoor dat je zoveel mogelijk details en eenvoudige instructies voor de reproductie geeft en stel Components in op Blink>ImageCapture . Glitch is ideaal voor het snel en eenvoudig delen van reproducties.

Wilt u de API gebruiken?

Bent u van plan de Shape Detection API op uw site te gebruiken? Uw publieke steun helpt ons om functies te prioriteren en laat andere browserleveranciers zien hoe belangrijk het is om deze te ondersteunen.

Nuttige links